<style>
  * {
    padding: 0;
    margin: 0;
  }

  body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  header {
    height: 40px;
    background-color: #1f1f1f;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #2b2b2b;
  }

  .left-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  header img {
    width: 25px;
    height: 25px;
    padding: 10px;
  }

  header span {
    color: #ffffff;
    text-align: center;
    padding: 0 10px;
  }

  .search {
    width: 500px;
    height: 25px;
    background-color: #313131;
    border-radius: 6px;
    display: flex;
    cursor: pointer;
    border: 1px solid #2a2a2a;
    justify-content: center;
    margin: 0 auto;
    /* 没有在最中间！！！！ */
    /* margin:   0 auto;  //居中的重点 */
    /* margin: 0 auto; 的作用是将一个块级元素在其父容器中水平居中对齐。这是因为设置了margin: 0 auto;之后，浏览器会自动计算出左右间距相等，从而使得元素水平居中显示 */
  }

  main {
    flex: 1;
    background-color: #5f6368;
    display: flex;
    flex-direction: row;
  }

  footer {
    height: 20px;
    background-color: #227dc9;
  }

  .sidebar {
    width: 40px;
    height: 100%;
    background-color: #333333;
    display: flex;
    flex-direction: column;
  }

  .imgbox {
    width: 40px;
    height: 40px;
    border-left: 2px solid #227dc9; /* 悬停时添加边框线 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .imgbox img {
    width: 25px;
    height: 25px;
    transition: transform 0.3s ease;
    /* 添加过渡效果 */
  }

  .imgbox:not(:first-child) {
    border-left: none;
    /* 移除除第一个元素外的其他元素的边框线 */
  }

  .imgbox:hover img {
    transform: scale(1.2);
    /* 悬停时放大图片 */
    border-left: 2px solid #333333;
  }

  .menu {
    width: 200px;
    height: 100%;
    background-color: #252526;
    display: flex;
    flex-direction: column;
  }
  .menu-list{
    color: #ffffff;
    font-size: 11px;
    display: flex;
    align-items: center;
    height: 22px;
    width: 100%;
    background-color: #04395e;
    border: 1px solid #0078d4 ;
    padding-left: 6px;
  }

  .right {
    flex: 1;
    background-color: #1e1e1e;
  }

  .rightt {
    width: 10px;
    background-color: #424242;
    border-left: 1px solid #7c7c7b;
  }
</style>

<body>
  <header>
    <div class="left-content">
      <img src="./img/icon.svg" alt="">
      <span>EasyTest管理后端</span>
    </div>
    <div class="search"></div>
  </header>
  <main>
    <div class="sidebar">
      <div class="imgbox">
        <img src="./img/indexOne.svg" alt="">
      </div>
      <div class="imgbox">
        <img src="./img/manageOne.svg" alt="">
      </div>
      <div class="imgbox">
        <img src="./img/androidOne.svg" alt="">
      </div>
      <div class="imgbox">
        <img src="./img/settingOne.svg" alt="">
      </div>
    </div>
    <div class="menu">
      <div class="menu-list">首页</div>
    </div>
    <div class="right"></div>
    <div class="rightt"></div>
  </main>
  <footer></footer>
</body>